<template>
  <div class="h-full flex flex-col">
    <!-- <Draggable>
      <div class="h-[100px] w-[160px]">AI生成内容</div>
    </Draggable> -->
    <div class="model-header">
      <div class="flex items-center">
        <div>
          <el-input
            v-model="queryData.name"
            style="width: 200px"
            placeholder="请输入模型名称"
          />
        </div>
        <div class="ml-[15px]">
          <el-input
            v-model="queryData.creator"
            style="width: 200px"
            placeholder="请输入创建人"
          />
        </div>
        <div class="ml-[15px]">
          <el-date-picker
            type="daterange"
            style="width: 280px"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
        <div class="ml-[15px]">
          <el-button class="w-[80px]" color="#626aef" type="primary">
            查询
          </el-button>
        </div>
        <div class="ml-[15px]">
          <el-button class="w-[90px]" color="#626aef" type="primary">
            新建模型
          </el-button>
        </div>
      </div>
    </div>
    <div class="sheet flex-1 overflow-auto mt-[10px]">
      <!-- <div>用户信息: {{ userInfos }}</div> -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'font-weight': 'bold', color: '#333' }"
      >
        <el-table-column
          prop="name"
          label="模型名称"
          width="200"
          align="center"
        />
        <el-table-column
          prop="dataSetCount"
          label="数据集数量"
          width="180"
          align="center"
        />
        <el-table-column prop="signCount" label="标签数量" align="center" />
        <el-table-column prop="creator" label="创建人" align="center" />
        <el-table-column prop="creator" label="标注案例" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" width="260">
          <template #default="scope">
            <el-button type="primary" text>
              <Edit class="w-[18px] h-[18px] mr-[2px]" />
              <span>编辑</span>
            </el-button>
            <el-button
              type="primary"
              @click="skipDatabase(scope.row.name)"
              text
            >
              <SvgIcon
                class="mr-[2px] transform -translate-y-[2px]"
                name="database"
                color="#409EFF"
              />
              <span>数据集管理</span>
            </el-button>
            <el-button type="primary" @click="skipTag(scope.row.name)" text>
              <SvgIcon
                class="mr-[2px] transform -translate-y-[1px]"
                name="label"
                color="#409EFF"
              />
              <span>标签管理</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-center py-[15px] border-t">
      <el-pagination
        v-model:current-page="queryData.pageNum"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineAsyncComponent, reactive, onMounted } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '@/store/user';
  import { useRouter } from 'vue-router';

  const SvgIcon = defineAsyncComponent(
    () => import('@/components/SvgIcon.vue'),
  );
  const Draggable = defineAsyncComponent(
    () => import('@/components/Draggable.vue'),
  );

  const router = useRouter();
  const userStores = useUserInfo();
  const { userInfos } = storeToRefs(userStores);

  const queryData = reactive({
    name: '', //模型名称
    creator: '', //创建人
    startTime: '', //开始时间
    endTime: '', //结束时间
    pageNum: 1, //页码
    pageSize: 10, //页数
  });

  const tableData = [
    {
      comment: '',
      createTime: '2025-02-25 14:18:11',
      creator: '金涛',
      dataSetCount: 0,
      hasLabeledExample: false,
      id: 46,
      name: '测试0225',
      signCount: 0,
    },
    {
      comment: '分析客户',
      createTime: '2025-02-11 10:23:18',
      creator: '金涛',
      dataSetCount: 2,
      hasLabeledExample: false,
      id: 45,
      name: '客户类别分析',
      signCount: 3,
    },
    {
      comment: '',
      createTime: '2025-01-10 09:05:01',
      creator: '房运运',
      dataSetCount: 7,
      hasLabeledExample: true,
      id: 44,
      name: '营销不规范分类模型',
      signCount: 5,
    },
    {
      comment: '',
      createTime: '2024-12-16 10:44:27',
      creator: '陈松青',
      dataSetCount: 4,
      hasLabeledExample: true,
      id: 43,
      name: '商机/风险模型',
      signCount: 8,
    },
    {
      comment: '语音标注模型',
      createTime: '2024-11-14 10:19:49',
      creator: '程亚新',
      dataSetCount: 0,
      hasLabeledExample: false,
      id: 42,
      name: '语音标注模型',
      signCount: 3,
    },
    {
      comment: '前端测试',
      createTime: '2024-11-06 15:05:56',
      creator: 'superAdmin',
      dataSetCount: 25,
      hasLabeledExample: false,
      id: 41,
      name: '前端测试',
      signCount: 5,
    },
    {
      comment: '',
      createTime: '2024-10-09 14:09:28',
      creator: '陈松青',
      dataSetCount: 4,
      hasLabeledExample: true,
      id: 40,
      name: '客户画像模型',
      signCount: 15,
    },
    {
      comment: '',
      createTime: '2024-09-30 17:20:48',
      creator: '陈松青',
      dataSetCount: 7,
      hasLabeledExample: true,
      id: 39,
      name: '失败原因分析模型',
      signCount: 24,
    },
    {
      comment: '',
      createTime: '2024-09-09 09:02:20',
      creator: '房运运',
      dataSetCount: 1,
      hasLabeledExample: true,
      id: 38,
      name: '语义质检-迁转模型',
      signCount: 13,
    },
    {
      comment: '',
      createTime: '2024-09-09 09:02:03',
      creator: '房运运',
      dataSetCount: 3,
      hasLabeledExample: true,
      id: 37,
      name: '语义质检-低消模型',
      signCount: 19,
    },
  ];

  const handleSizeChange = (val: number) => {
    queryData.pageSize = val;
  };

  const handleCurrentChange = (val: number) => {
    queryData.pageNum = val;
  };

  const skipTag = (name: string) => {
    router.push({
      path: '/model/manage/tag',
      query: { modelName: name },
    });
  };

  const skipDatabase = (name: string) => {
    router.push({
      path: '/model/manage/database',
      query: { modelName: name },
    });
  };
</script>

<style scoped>
  .el-button {
    padding: 5px !important;
  }
</style>
